<template>
  <div>
    <button class="btn" @click="resetMap">重置地图</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

import { useMapgisStore_zxh } from '@/stores/mapgis-zxh.js'
const { resetMap } = useMapgisStore_zxh()

onMounted(() => {})

</script>

<style>
/* 重置地图按钮 */
.btn {
  width: 100px;
  height: 50px;
  position: fixed;
  top: 70px;
  left: 60px;
  z-index: 100;
  background-color: #c155f8;
  border: none;
  border-radius: 10px;
  color: #fff;
}
/* 缩放控件样式设置 */
.ol-zoomslider {
  top: 7.5em;
  left: 0.5em;
  height: 200px;
  background-color: #652e8060;
}
.ol-zoomslider:hover {
  background-color: #652e8080;
}
/* 鼠标位置信息自定义样式设置 */
.ol-mouse-position {
  color: #ff2d51;
  font-size: 16px;
  font-family: '微软雅黑';
  position: absolute;
  top: 1.5em;
  left: 12em;
}
/* 比例尺控件样式设置 */
.ol-scale-line {
  bottom: 0.5em;
  left: 0.5em;
}
/* 鹰眼控件样式设置 */
.ol-custom-overviewmap {
  /* position: fixed; */
  left: 0;
  bottom: 0;
  top: auto;
  left: auto;
}

.ol-overviewmap-box {
  border: 1px solid #ff2d51;
}
</style>
